<template>
  <div style="width:100vw;display:flex;justify-content: center;background:#F9F9F9">
    <div class="container" style="width: 75vw;padding: 20px;padding-top: 0px;">
      <StuExamNavBar :examId="examId" :semesterId="semesterId" />
      
      <!-- 移除表单提交事件 -->
      <div class="content-section"> 
        <!-- 考试模式 -->
        <div class="settings-box">
          <p class="section-title">考试模式</p>
          <div class="radio-group" style="margin: 10px 20px 20px 30px;">
            <!-- 禁用单选框 -->
            <label v-for="mode in examModes" :key="mode.value">
              <input type="radio" v-model="formData.exam_mode" :value="mode.value" disabled /> {{ mode.label }}
            </label>
          </div>
        </div>

        <!-- 时间设置 -->
        <div class="settings-box">
          <p class="section-title">时间设置</p>
          <div class="form-group checkbox-group">
            <!-- 禁用复选框 -->
            <input type="checkbox" v-model="formData.is_during" true-value="1" false-value="0" disabled />
            <label>限时考试</label>
            <template v-if="formData.is_during == 1">
              <!-- 禁用输入框 -->
              <input type="number" v-model="formData.during_time" placeholder="考试时长(分钟)" min="1" disabled />
            </template>
          </div>
          <div class="form-group">
            <label style="margin-left: 25px;">开始时间</label>
            <!-- 禁用输入框 -->
            <input type="datetime-local" v-model="formData.start_time" disabled />
          </div>
          <div class="form-group">
            <label style="margin-left: 25px;">结束时间</label>
            <!-- 禁用输入框 -->
            <input type="datetime-local" v-model="formData.end_time" disabled />
          </div>
        </div>

        <!-- 考试限制 -->
        <div class="settings-box">
          <p class="section-title">考试限制</p>
          <div class="form-group checkbox-group">
            <!-- 禁用复选框 -->
            <input type="checkbox" v-model="formData.is_late_time" true-value="1" false-value="0" disabled />
            <label>迟到限制</label>
            <template v-if="formData.is_late_time == 1">
              <!-- 禁用输入框 -->
              <input type="number" v-model="formData.late_time" placeholder="迟到限制(分钟)" min="1" disabled />
            </template>
          </div>
          <div class="form-group checkbox-group">
            <!-- 禁用复选框 -->
            <input type="checkbox" v-model="formData.is_earlier_time" true-value="1" false-value="0" disabled />
            <label>提前交卷</label>
            <template v-if="formData.is_earlier_time == 1">
              <!-- 禁用输入框 -->
              <input type="number" v-model="formData.earlier_time" placeholder="允许提前时间(分钟)" min="1" disabled />
            </template>
          </div>
        </div>

        <!-- 随机设置 -->
        <div class="settings-box">
          <p class="section-title">随机设置</p>
          <div class="checkbox-group" style="padding: 0px 30px 20px;gap: 20px;">
            <!-- 禁用复选框 -->
            <label><input type="checkbox" v-model="formData.is_qs_random" true-value="1" false-value="0" disabled /> 小题顺序随机</label>
            <label><input type="checkbox" v-model="formData.is_option_random" true-value="1" false-value="0" disabled /> 选项顺序随机</label>
            <label><input type="checkbox" v-model="formData.is_cv" true-value="1" false-value="0" disabled /> 禁止复制粘贴</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getExamSettings } from '@/services/api';
import StuExamNavBar from '@/components/StuExamNavBar.vue';

export default {
  name: 'StuExamSettings',
  components: { StuExamNavBar },
  setup() {
    const route = useRoute();
    const examId = route.params.examId;
    const semesterId = route.params.semesterId;
    const originalRemindList = ref([]);

    const examModes = ref([
      { label: '正式考试', value: 1 },
      { label: '模拟考试', value: 2 }
    ]);

    const formData = ref({
      exam_mode: 1,
      start_time: '',
      end_time: '',
      during_time: null,
      is_during: 0,
      is_late_time: 0,
      late_time: null,
      is_earlier_time: 0,
      earlier_time: null,
      is_cv: 0,
      is_qs_random: 0,
      is_option_random: 0,
      is_pwd: 0,
      start_pwd: '',
      remind_list: []
    });

    const loadSettings = async () => {
      try {
        const res = await getExamSettings(Number(examId));
        if (res.data.status === 1) {
          originalRemindList.value = res.data.data.remind_list || [];
          formData.value = { 
           ...res.data.data,
            remind_list: originalRemindList.value.map(item => ({
              exam_remind_id: item.exam_remind_id,
              remind_content: item.remind_content,
              remind_time: item.remind_time
            }))
          };
        }
      } catch (error) {
        console.error('获取设置失败:', error);
      }
    };

    onMounted(loadSettings);

    return {
      examId,
      semesterId,
      examModes,
      formData
    };
  }
};
</script>

<style scoped>
label{
  font-size: 14px;
}
/* 复用原有样式基础上补充 */
.settings-box {
  border-bottom: 1px solid #eee;
}

.section-title {
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.form-group {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  margin: 10px 20px 20px 30px;
}


.radio-group label {
  margin-right: 2rem;
}

.button-group {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
/* 优化容器样式 */
.content-section {
  background-color: #ffffff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 统一输入框样式 */
input[type="checkbox"]{
  margin-right:10px ;
}

input[type="text"],
input[type="number"],
input[type="datetime-local"] {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 240px;
  transition: border-color 0.3s;
  margin: 0px 20px;
}

input:disabled {
  background-color: #f5f7fa;
}

/* 优化复选框组布局 */
.checkbox-group {
  display: flex;
  align-items: center;
}

/* 操作按钮样式优化 */
.button-group {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  padding-left: 30px;
}

.submit-button {
  background-color: #244382;
  color: white;
  padding: 10px 35px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #3E66B0;
}
/* 图片按钮样式 */
.delete-btn, .add-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 10px;
}

.btn-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* 调整添加按钮位置 */
.add-btn {
  margin-left: 30px;
  padding: 8px 15px;
}

.back-button {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.back-button:hover {
    background-color: #C9C8C8;
    }

</style>